<template>
  <a-layout class="layout">
    <a-layout-header>
      <div class="logo"/>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
        <a-menu-item key="1" @click="goIndex">首页</a-menu-item>
        <a-menu-item key="2" @click="goArticles">博文</a-menu-item>
        <a-menu-item key="3" @click="goBaidu">百度</a-menu-item>
      </a-menu>
    </a-layout-header>

    <a-layout-content style="padding: 0 50px">
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">

        <a-table
            :columns="columns"
            :row-key="record => record.login.uuid"
            :data-source="dataSource"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
        >
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
          </template>
        </a-table>

      </div>

    </a-layout-content>

    <a-layout-footer style="text-align: center">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>


<script>
import router from "../router/index.js";
import {GetArticle, GetPageData} from "../utils/article.js";
import {ref} from "vue";
import {usePagination} from 'vue-request';
import {computed} from 'vue';

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  sorter: true,
  width: '20%',
}, {
  title: 'Gender',
  dataIndex: 'gender',
  filters: [{
    text: 'Male',
    value: 'male',
  }, {
    text: 'Female',
    value: 'female',
  }],
  width: '20%',
}, {
  title: 'Email',
  dataIndex: 'email',
}];


export default {

  setup() {
    const selectedKeys = ref(['2'])

    const queryData = params => {
      return GetPageData(params);
    };


    const {
      data: dataSource,
      run,
      loading,
      current,
      pageSize,
    } = usePagination(queryData, {
      formatResult: res => res.data.results,
      pagination: {
        currentKey: 'page',
        pageSizeKey: 'results',
      },
    });
    const pagination = computed(() => ({
      total: 200,
      current: current.value,
      pageSize: pageSize.value,
    }));
    const handleTableChange = (pag, filters, sorter) => {
      run({
        results: pag.pageSize,
        page: pag?.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    };

    return {
      selectedKeys,
      dataSource,
      pagination,
      loading,
      columns,
      handleTableChange,
    };
  },

  methods: {
    goIndex() {
      console.log('goIndex')
      router.push("/")
    },
    goArticles() {
      console.log('goArticles')
      console.log(router)
      router.push("/article")
    },
    goBaidu() {
      console.log('goBaidu')
      router.push("/baidu")
    }
  }
};
</script>